<html>
<body>

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">大文件断点续传：</div>
        <div class="panel-body">
            <input type="file" id="file"/><br/>
            <input type="button" value="暂停" onclick="stop();"/>&empty;
            <input type="button" value="继续" onclick="containue();"/>&empty;
            <input type="button" value="取消" onclick="cancel();"/>
            <progress id="progressOne" style="width:400px;" max="100" value="0"></progress>
            <blockquote id="Status" style="word-break:break-all;"></blockquote>
        </div>
        <script type="text/javascript">
/*
    * 测试WebSocket上传
    * 本地浏览器上传速度测试单个文件，上传速度IE>FF>Google(Google浏览器慢相当多)
    */
var fileBox = document.getElementById('file');
var reader = null;  //读取操作对象
var step = 1024 * 64;  //每次读取文件大小 ,字节数
var cuLoaded = 0; //当前已经读取总数
var file = null; //当前读取的文件对象
var enableRead = true;//标识是否可以读取文件
var total = 0;        //记录当前文件总字节数
var startTime = null; //标识开始上传时间
fileBox.onchange = function () {
    //获取文件对象
    file = this.files[0];
    total = file.size;
    console.info("文件大小：" + file.size);
    if (ws == null) {
        if (window.confirm('建立与服务器链接失败,确定重试链接吗')) {
            createSocket(function () {
                sendFileName();
            });
        }
        return;
    }
    sendFileName();
}

function sendFileName(){
    console.info('send File name :'+file.name);
    ws.send('fileName:'+file.name);
}
//绑定reader
function bindReader() {
    startTime = new Date();
    enableRead = true;
    reader = new FileReader();
    //读取一段成功
    reader.onload = function (e) {
        console.info('读取总数：' + e.loaded);
        if (enableRead == false)
            return false;
        //根据当前缓冲区来控制客户端读取速度
        if (ws.bufferedAmount > step * 10) {
            setTimeout(function () {
                //继续读取
                console.log('--------------》进入等待');
                loadSuccess(e.loaded);
            }, 3);
        } else {
            //继续读取
            loadSuccess(e.loaded);
        }
    }
    //开始读取
    readBlob();
}
//读取文件成功处理
function loadSuccess(loaded) {
    //将分段数据上传到服务器
    var blob = reader.result;
    //使用WebSocket 服务器发送数据
    ws.send(blob);
    //如果没有读完，继续
    cuLoaded += loaded;
}
//指定开始位置，分块读取文件
function readBlob() {
    //指定开始位置和结束位置读取文件
    var blob = file.slice(cuLoaded, cuLoaded + step);
    reader.readAsArrayBuffer(blob);
}
//中止
function stop() {
    //中止读取操作
    console.info('中止，cuLoaded：' + cuLoaded);
    enableRead = false;
    reader.abort();
}
//继续
function containue() {
    console.info('继续，cuLoaded：' + cuLoaded);
    enableRead = true;
    readBlob();
}

//取消
function cancel(){
    console.info('取消，cuLoaded：' + cuLoaded);
    ws.send('act:cancel');
}
 //显示结果进度
function showProcess(){
     var percent = (cuLoaded / total) * 100;
     document.getElementById('Status').innerText = percent;
     document.getElementById('progressOne').value = percent;
}
var ws = null;
//创建和服务器的WebSocket 链接
function createSocket(onSuccess) {
    var url = 'ws://localhost:7000/ws';
    ws = new WebSocket(url);
    ws.onopen = function () {
        console.log('connected成功');
        if (onSuccess)
            onSuccess();
    }
    ws.onmessage = function (e) {
        var data = e.data;
        console.log("服务端返回数据："+e.data);
        if (isNaN(data) == false) {
            cuLoaded = parseInt(data);
            console.log('当前已上传：' + cuLoaded);
            showProcess();
            console.log('开始上传数据........');
            bindReader();
        } else if(data=='canceled'){
             console.log('取消上传数据........');
             cuLoaded = 0;
             showProcess();
            enableRead = false;
            reader.abort();
        } else if(data=='ok'){
            if (cuLoaded < total) {
                readBlob();
            } else {
                ws.send('act:complete');
                console.log('总共上传：' + cuLoaded + ',总共用时：' + (new Date().getTime() - startTime.getTime()) / 1000);
            }
            showProcess();
        }else {
            console.info("filePath:"+data);
        }
    }
    ws.onclose = function (e) {
        //中止客户端读取
        stop();
        console.log('链接断开');
    }
    ws.onerror = function (e) {
        //中止客户端读取
        stop();
        console.info(e);
        console.log('传输中发生异常');
    }
}
//页面加载完建立链接
createSocket();

        </script>
    </div>
</div>
</body>
</html>